<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '充值',
  },
}
</route>

<template>
  <view class="bg-white min-h-screen">
    <view class="px-4">
      <!-- 账户余额 -->
      <view class="py-4">
        <view class="text-gray-600 mb-2">账户余额</view>
        <view class="text-2xl font-medium">50.01元</view>
      </view>

      <!-- 充值金额选项 -->
      <view class="grid grid-cols-3 gap-3 mb-6">
        <view
          v-for="(item, index) in rechargeOptions"
          :key="index"
          class="rounded-lg p-3 text-center"
          :class="{ 'bg-[#6C8BFF]': item.selected }"
          @click="selectAmount(index)"
        >
          <view class="text-lg" :class="item.selected ? 'text-white' : 'text-black'">
            {{ item.amount }}元
          </view>
          <view class="text-sm" :class="item.selected ? 'text-white/80' : 'text-gray-500'">
            {{ item.desc }}
          </view>
        </view>
      </view>

      <!-- 充值说明 -->
      <view class="mb-6">
        <view class="text-gray-600 mb-2">充值说明</view>
        <view v-for="(item, index) in instructions" :key="index" class="text-gray-500 text-sm mb-1">
          {{ item }}
        </view>
      </view>

      <!-- 充值按钮 -->
      <button
        style="background-color: #655cf3"
        class="text-white w-full py-3 rounded-lg"
        @click="handleRecharge"
      >
        确认充值
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getRechargeList } from '@/service/index/foo'

// 定义接口返回数据类型
interface RechargeOption {
  recharge_id: number
  recharge_no: string | null
  send_money: string
  money: string
  created_at: string
  desc: string
}

// 修改充值选项的数据结构
const rechargeOptions = ref<{ amount: string; bonus: string; selected: boolean }[]>([])

// 获取充值列表数据
const fetchRechargeList = async () => {
  try {
    const res = await getRechargeList()
    if (res.code === 0 && res.data) {
      // 转换接口数据为展示格式
      rechargeOptions.value = res.data.map((item: RechargeOption, index: number) => ({
        amount: item.money,
        bonus: item.send_money,
        desc: item.desc,
        selected: index === 0, // 默认选中第一项
      }))
    }
  } catch (error) {
    uni.showToast({ title: '获取充值选项失败', icon: 'none' })
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchRechargeList()
})

const instructions = ['权益一—开柜会扣除余额', '权益二—开柜会扣除余额', '权益三—开柜会扣除余额']

const selectAmount = (index: number) => {
  rechargeOptions.value.forEach((item, i) => {
    item.selected = i === index
  })
}

const handleRecharge = async () => {
  const selectedOption = rechargeOptions.value.find((item) => item.selected)
  if (selectedOption) {
    uni.showLoading({ title: '充值中...' })
    try {
      // TODO: 调用充值接口
      // 这里需要添加实际的充值API调用
      uni.hideLoading()
      uni.showToast({ title: '充值成功', icon: 'success' })
    } catch (error) {
      uni.hideLoading()
      uni.showToast({ title: '充值失败', icon: 'none' })
    }
  }
}

const goBack = () => {
  uni.navigateBack()
}
</script>
